<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
    <title>cordova-plugin-ImagePicker Demo</title>
</head>

<body>

    <button id="btn1">选择图片(最大1920*1440)</button>
    <button id="btn2">选择图片(自动宽高)</button>

    <div id="img_list"></div>


    <script type="application/javascript">
        var Demo = {
            // Application Constructor
            initialize: function () {
                document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
            },

            // deviceready Event Handler
            //
            // Bind any cordova events here. Common events are:
            // 'pause', 'resume', etc.
            onDeviceReady: function () {
                document.getElementById('btn1').onclick = Demo.getImage1;
                document.getElementById('btn2').onclick = Demo.getImage2;
            },

            getImage1: function () {
                ImagePicker.getPictures(function (result) {
                    Demo.showImage(result);
                }, function (err) {
                    alert(err);
                }, {
                    maximumImagesCount: 9,
                    width: 1920,
                    height: 1440,
                    quality: 100
                });
            },

            getImage2: function () {
                ImagePicker.getPictures(function (result) {
                    Demo.showImage(result);
                }, function (err) {
                    alert(err);
                }, {
                    maximumImagesCount: 9,
                    width: -1,
                    height: -1,
                    quality: 100
                });
            },

            showImage: function (result) {
                var list = result.images;
                var imgContainer = document.getElementById("img_list");
                imgContainer.innerHTML = "";

                for (var i = 0; i < list.length; i++) {
                    var x = list[i];
                    (function (x) {
                        var div = document.createElement("div");

                        // 选图插件返回的宽高、体积
                        var node = document.createElement('p');
                        node.innerHTML = x.path + "<br>resultWidth: " + x.width + ", resultHeight: " +
                            x.height + ', size: ' + x.size;
                        div.appendChild(node);

                        // 创建对象
                        var img = new Image();
                        img.onload = function () {
                            // 实际宽高
                            var node = document.createElement('p');
                            node.innerHTML = "naturalWidth: " + img.naturalWidth + ", naturalHeight: " +
                                img.naturalHeight;
                            div.appendChild(node);
                        };
                        img.src = x.path + '?' + new Date().getTime();
                        img.width = 200;

                        div.appendChild(img);

                        imgContainer.appendChild(div);
                    })(x)
                }
            }
        };

        Demo.initialize();
    </script>
    <script type="text/javascript" src="cordova.js"></script>
</body>

</html>